<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="10" :lg="11" :md="12" :sm="24">
            <a-form-item :label="$t('日期')">
              <j-date :placeholder="$t('请选择开始日期')" class="query-group-cust" v-model="queryParam.date_begin"></j-date>
              <span class="query-group-split-cust"></span>
              <j-date :placeholder="$t('请选择结束日期')" class="query-group-cust" v-model="queryParam.date_end"></j-date>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24" v-if="!tenantid">
            <a-form-item :label="$t('门店')">
              <a-select v-model="queryParam.shopCode">
                <a-select-option v-for="(item,i) in shops" :key="i" :value="item.value">{{item.title}}<span v-if="item.value != ''">（{{item.value}}）</span></a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">{{$t('查询')}}</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{$t('重置')}}</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" icon="download" :loading="exloading" @click="handleExportXls($t('场地会员变化'))" v-has="'BisMemberReportController:export'">{{$t('导出')}}</a-button>
      <a-button type="primary" v-print="'#printme'" v-has="'BisMemberReportController:print'">{{$t('打印')}}</a-button>
    </div>

    <!-- table区域-begin -->
    <div id="printme">
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :scroll="{ x: true,y:tableHeight }"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :customHeaderRow="customHeaderRow"
        :customRow="customRow"
        @change="handleTableChange"
      >
        <template slot="footer">
          <div style="font-weight: bold">
            <span>{{$t('本期增')}}：</span>
            <span>{{$t('会员')}}:{{ totalInfo.addMember.toFixed(0) }}</span>
            <span style="margin-left: 6px;" v-if="operateCoin == 1">{{$t('币')}}:{{ totalInfo.addCoin.toFixed(2) }}</span>
            <span style="margin-left: 6px;" v-if="operateLottery == 1">{{$t('票')}}:{{ totalInfo.addLottery.toFixed(0) }}</span>
            <span style="margin-left: 6px;" v-if="operateCredit == 1">{{$t('积分')}}:{{ totalInfo.addIntegral.toFixed(0) }}</span>
            <span style="margin-left: 6px;" v-if="operateALottery == 1">{{$t('A票')}}:{{ totalInfo.addALottery.toFixed(0) }}</span>
            <span style="margin-left: 6px;" v-if="operateACoin == 1">{{$t('A币')}}:{{ totalInfo.addACoin.toFixed(0) }}</span>
            <span style="margin-left: 30px;">{{$t('本期减')}}：</span>
            <span>{{$t('会员')}}:{{ totalInfo.subMember }}</span>
            <span style="margin-left: 6px;" v-if="operateCoin == 1">{{$t('币')}}:{{ totalInfo.subCoin.toFixed(2) }}</span>
            <span style="margin-left: 6px;" v-if="operateLottery == 1">{{$t('票')}}:{{ totalInfo.subLottery.toFixed(0) }}</span>
            <span style="margin-left: 6px;" v-if="operateCredit == 1">{{$t('积分')}}:{{ totalInfo.subIntegral.toFixed(0) }}</span>
            <span style="margin-left: 6px;" v-if="operateALottery == 1">{{$t('A票')}}:{{ totalInfo.subALottery.toFixed(0) }}</span>
            <span style="margin-left: 6px;" v-if="operateACoin == 1">{{$t('A币')}}:{{ totalInfo.subACoin.toFixed(0) }}</span>
          </div>
        </template>
      </a-table>
    </div>

    <bis-member-report-modal ref="modalForm" @ok="modalFormOk"></bis-member-report-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import Vue from 'vue'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { initDictOptions, filterMultiDictText } from '@/components/dict/JDictSelectUtil'
import BisMemberReportModal from './modules/BisMemberReportModal'

export default {
  name: 'BisMemberReportList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    BisMemberReportModal,
  },
  data() {
    return {
      description: '会员报表管理页面',
      // 表头
      columns: [
        {
          title: this.$t('日期'),
          align: 'center',
          dataIndex: 'date',
          width: 100,
          customRender: function (text) {
            return !text ? '' : text.length > 10 ? text.substr(0, 10) : text
          },
        },
        {
          title: this.$t('会员数量'),
          align: 'center',
          children: [
            {
              title: this.$t('期初'),
              align: 'right',
              dataIndex: 'initialMember',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('本期增'),
              align: 'right',
              dataIndex: 'addMember',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('本期注销'),
              align: 'right',
              dataIndex: 'subMember',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('其它'),
              align: 'right',
              dataIndex: 'otherMember',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('期末'),
              align: 'right',
              dataIndex: 'finalMember',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            }
          ]
        },
      ],
      url: {
        list: '/member/bisMemberReport/list',
        delete: '/member/bisMemberReport/delete',
        deleteBatch: '/member/bisMemberReport/deleteBatch',
        exportXlsUrl: '/member/bisMemberReport/exportXls',
        importExcelUrl: 'member/bisMemberReport/importExcel',
        totalUrl: '/member/bisMemberReport/total'
      },
      dictOptions: {},
      superFieldList: [],
      queryParam: {
        shopCode: ''
      },
      shops:[],
      tenantid: Vue.ls.get('TENANT_ID'),
      isfooter:true,
      isCustom:true,
      isHideData:false,
      thRows: 2,
      isOptArea: true,
      operateCoin: localStorage.getItem('operateCoin'),
      operateLottery: localStorage.getItem('operateLottery'),
      operateCredit: localStorage.getItem('operateCredit'),
      operateALottery: localStorage.getItem('operateALottery'),
      operateACoin: localStorage.getItem('operateACoin')
    }
  },
  created() {
    if (!this.tenantid) {
      let dtl = {
          title: this.$t('门店编码'),
          align: 'center',
          dataIndex: 'shopCode',
          width: 100,
          customCell: (r, i) => {
            return {
              style: {
                whiteSpace: 'normal',
              },
            }
          },
        },
        dtl1 = {
          title: this.$t('门店名称'),
          align: 'center',
          dataIndex: 'shopCode_dictText',
          width: 140,
          customCell: (r, i) => {
            return {
              style: {
                whiteSpace: 'normal',
              },
            }
          },
        }
      this.columns.unshift(dtl1)
      this.columns.unshift(dtl)
    }
  },
  mounted(){
    let that=this
    document.onkeydown = function(e) {
      let key = window.event.keyCode;
      if (key== 75 && event.ctrlKey) {
        window.event.preventDefault()
        that.isHideData = false
        that.queryParam.dataType=0
        that.searchQuery()
      }
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  methods: {
    initDictConfig() {
      if (localStorage.getItem('operateCoin') == 1) {
        this.columns.splice(this.columns.length, 0, {
          title: this.$t('会员币值'),
          align: 'center',
          children: [
            {
              title: this.$t('期初'),
              align: 'right',
              dataIndex: 'initialCoin',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(2);
              }
            },
            {
              title: this.$t('本期增'),
              align: 'right',
              dataIndex: 'addCoin',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(2);
              }
            },
            {
              title: this.$t('本期减'),
              align: 'right',
              dataIndex: 'subCoin',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(2);
              }
            },
            {
              title: this.$t('其它'),
              align: 'right',
              dataIndex: 'otherCoin',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(2);
              }
            },
            {
              title: this.$t('期末'),
              align: 'right',
              dataIndex: 'finalCoin',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(2);
              }
            }
          ]
        })
      }
      if (localStorage.getItem('operateLottery') == 1) {
        this.columns.splice(this.columns.length, 0, {
          title: this.$t('会员票值'),
          align: 'center',
          children: [
            {
              title: this.$t('期初'),
              align: 'right',
              dataIndex: 'initialLottery',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('本期增'),
              align: 'right',
              dataIndex: 'addLottery',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('本期减'),
              align: 'right',
              dataIndex: 'subLottery',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('其它'),
              align: 'right',
              dataIndex: 'otherLottery',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('期末'),
              align: 'right',
              dataIndex: 'finalLottery',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            }
          ]
        })
      }
      if (localStorage.getItem('operateCredit') == 1) {
        this.columns.splice(this.columns.length, 0, {
          title: this.$t('会员积分'),
          align: 'center',
          children: [
            {
              title: this.$t('期初'),
              align: 'right',
              dataIndex: 'initialIntegral',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('本期增'),
              align: 'right',
              dataIndex: 'addIntegral',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('本期减'),
              align: 'right',
              dataIndex: 'subIntegral',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('其它'),
              align: 'right',
              dataIndex: 'otherIntegral',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('期末'),
              align: 'right',
              dataIndex: 'finalIntegral',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            }
          ]
        })
      }
      if (localStorage.getItem('operateALottery') == 1) {
        this.columns.splice(this.columns.length, 0, {
          title: this.$t('会员A票'),
          align: 'center',
          children: [
            {
              title: this.$t('期初'),
              align: 'right',
              dataIndex: 'initialALottery',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('本期增'),
              align: 'right',
              dataIndex: 'addALottery',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('本期减'),
              align: 'right',
              dataIndex: 'subALottery',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('其它'),
              align: 'right',
              dataIndex: 'otherALottery',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('期末'),
              align: 'right',
              dataIndex: 'finalALottery',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            }
          ]
        })
      }
      if (localStorage.getItem('operateACoin') == 1) {
        this.columns.splice(this.columns.length, 0, {
          title: this.$t('会员A币'),
          align: 'center',
          children: [
            {
              title: this.$t('期初'),
              align: 'right',
              dataIndex: 'initialACoin',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('本期增'),
              align: 'right',
              dataIndex: 'addACoin',
              width: 126,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('本期减'),
              align: 'right',
              dataIndex: 'subACoin',
              width: 126,
            },
            {
              title: this.$t('其它'),
              align: 'right',
              dataIndex: 'otherACoin',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            },
            {
              title: this.$t('期末'),
              align: 'right',
              dataIndex: 'finalACoin',
              width: 90,
              customRender: (text, r) => {
                return text.toFixed(0);
              }
            }
          ]
        })
      }
      this.customInit()
      initDictOptions('bis_shop,name,code').then((res) => {
        if (res.success) {
          this.shops = res.result
          this.shops.unshift({ value: '', title: this.$t('全部') })
        }
      })
    },
    customInit(){
      this.isHideData = true
      this.queryParam.dataType=1
      this.loadData(1)
    },
    searchReset(){
      this.queryParam={
        shopCode: ''
      }
      this.selectedRowIndex = []
      this.customInit()
    }
  },
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>